﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:BankCharts_Silverlight_ViewModel="clr-namespace:BankCharts.Silverlight.ViewModel" 
	xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
	xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
	xmlns:GalaSoft_MvvmLight_Command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.SL5" 
	xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" 
	xmlns:BankCharts_Silverlight_Behavior="clr-namespace:BankCharts.Silverlight.Behavior" 
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="BankCharts.Silverlight.MainPage"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400"
	BankCharts_Silverlight_Behavior:VisualStates.CurrentState="{Binding ApplicationState, Mode=TwoWay}">

	<UserControl.DataContext>
		<BankCharts_Silverlight_ViewModel:MainViewModel/>
	</UserControl.DataContext>

    <Grid x:Name="LayoutRoot" Background="White">
    	<VisualStateManager.VisualStateGroups>
    		<VisualStateGroup x:Name="GeneralVisualStateGroup" ei:ExtendedVisualStateManager.UseFluidLayout="True">
    			<VisualStateGroup.Transitions>
    				<VisualTransition GeneratedDuration="0:0:1">
    					<VisualTransition.GeneratedEasingFunction>
    						<BackEase EasingMode="EaseOut" Amplitude="0.5"/>
    					</VisualTransition.GeneratedEasingFunction>
    				</VisualTransition>
    			</VisualStateGroup.Transitions>
    			<VisualState x:Name="IdleState">
    				<Storyboard>
    					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="InfoGrid">
    						<DiscreteObjectKeyFrame KeyTime="0">
    							<DiscreteObjectKeyFrame.Value>
    								<Thickness>3,3,3,-60</Thickness>
    							</DiscreteObjectKeyFrame.Value>
    						</DiscreteObjectKeyFrame>
    					</ObjectAnimationUsingKeyFrames>
    				</Storyboard>
    			</VisualState>
    			<VisualState x:Name="InfoPrintState">
    				<Storyboard>
    					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="InfoGrid">
    						<DiscreteObjectKeyFrame KeyTime="0">
    							<DiscreteObjectKeyFrame.Value>
    								<Thickness>3</Thickness>
    							</DiscreteObjectKeyFrame.Value>
    						</DiscreteObjectKeyFrame>
    					</ObjectAnimationUsingKeyFrames>
    				</Storyboard>
    			</VisualState>
    		</VisualStateGroup>
    	</VisualStateManager.VisualStateGroups>
    	<VisualStateManager.CustomVisualStateManager>
    		<ei:ExtendedVisualStateManager/>
    	</VisualStateManager.CustomVisualStateManager>
    	<sdk:TabControl x:Name="tabControl" TabStripPlacement="Left">
    		<i:Interaction.Triggers>
    			<i:EventTrigger EventName="SelectionChanged">
    				<GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding TabSelectionChangedCommand}" PassEventArgsToCommand="True"/>
    			</i:EventTrigger>
    		</i:Interaction.Triggers>
    		<sdk:TabItem Header="Load data">
    			<Grid Background="#FFE5E5E5" DataContext="{Binding UnparsedBankDataManager}">
    				<ScrollViewer>
    					<TextBox x:Name="textBox2" TextWrapping="Wrap" AcceptsReturn="True" Text="{Binding CSVContent, Mode=TwoWay}">
    						<i:Interaction.Behaviors>
    							<BankCharts_Silverlight_Behavior:OnKeyPressedTextboxBehavior/>
    						</i:Interaction.Behaviors>
    					</TextBox>
    				</ScrollViewer>
    				<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" VerticalAlignment="Bottom" Text="Copy Paste your CSV bank account" Margin="0,0,20,5" FontSize="26.667" Width="212" FontWeight="Bold" Foreground="#1C000000" IsHitTestVisible="False"/>
    			</Grid>
    		</sdk:TabItem>
    		<sdk:TabItem Header="Lookup data" Margin="0,0,1,4">
    			<Grid x:Name="CategoryGrid" Background="#FFE5E5E5" DataContext="{Binding CategoryManager}">
    				<Grid.ColumnDefinitions>
    					<ColumnDefinition Width="0.5*"/>
    					<ColumnDefinition Width="0.5*"/>
    				</Grid.ColumnDefinitions>
    				<ListBox x:Name="CategoryListbox" Margin="0,28,15,0" ItemsSource="{Binding Categories}" SelectedItem="{Binding SelectedCategory, Mode=TwoWay}" ItemTemplate="{StaticResource CategoryItemTemplate}"/>
    				<TextBox x:Name="textBox" TextWrapping="Wrap" Text="Category name" VerticalAlignment="Top" Margin="0,2,32,0"/>
    				<ListBox Margin="0,28,0,0" Grid.Column="1" ItemsSource="{Binding SelectedCategory.Tokens}">
    				<ListBox.ItemTemplate>
    					<DataTemplate>
							<StackPanel Orientation="Horizontal">
								<TextBlock TextWrapping="Wrap" Text="{Binding Mode=OneWay}" VerticalAlignment="Center"/>
								<Image Height="16" Source="/BankCharts.Silverlight;component/Media/Pictures/Remove.png" Stretch="Fill" Width="16" Margin="10,0,0,0">
									<i:Interaction.Triggers>
										<i:EventTrigger EventName="MouseLeftButtonDown">
											<GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding SelectedItem.RemoveTokenCommand, ElementName=CategoryListbox}" CommandParameter="{Binding Mode=OneWay}"/>
										</i:EventTrigger>
									</i:Interaction.Triggers>
								</Image>
							</StackPanel>
						</DataTemplate>
					</ListBox.ItemTemplate>
					</ListBox>
    				<TextBox x:Name="textBox1" TextWrapping="Wrap" Text="Token value" VerticalAlignment="Top" Margin="0,2,32,0" Grid.Column="1"/>
    				<Button x:Name="AddCatButton" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,3,4,0">
    					<i:Interaction.Triggers>
    						<i:EventTrigger EventName="Click">
    							<GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding AddCategoryCommand}" CommandParameter="{Binding Text, ElementName=textBox}"/>
    						</i:EventTrigger>
    					</i:Interaction.Triggers>
    					<Image Height="16" Source="Media/Pictures/Add.png" Stretch="Fill" Width="16"/>
    				</Button>
    				<Button x:Name="AddTokenButton" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,3,4,0" Grid.Column="3">
    					<i:Interaction.Triggers>
    						<i:EventTrigger EventName="Click">
    							<GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding AddIdentificationTokenCommand}" CommandParameter="{Binding Text, ElementName=textBox1}" MustToggleIsEnabled="True"/>
    						</i:EventTrigger>
    					</i:Interaction.Triggers>
    					<Image Height="16" Source="Media/Pictures/Add.png" Stretch="Fill" Width="16"/>
    				</Button>
    			</Grid>
    		</sdk:TabItem>
    		<sdk:TabItem Header="Result">
    			<Grid Background="#FFE5E5E5">
    				<toolkit:Chart d:LayoutOverrides="Height">
    					<toolkit:PieSeries Margin="0" ItemsSource="{Binding StatisticsManager.Categories}" IndependentValuePath="Name" DependentValuePath="ResultAmount" AnimationSequence="FirstToLast"/>
    				</toolkit:Chart>
    			</Grid>
    		</sdk:TabItem>
    	</sdk:TabControl>
    	<Grid x:Name="InfoGrid" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="350" Height="50" Margin="3,3,3,-60">
    		<Rectangle x:Name="rectangle" Stroke="#FF8AB623" StrokeThickness="2" RadiusX="3" RadiusY="3" Fill="#E6FFFFCA"/>
    		<Image HorizontalAlignment="Left" Margin="5" Source="Media/Pictures/Info.png" Stretch="Fill" VerticalAlignment="Center" Width="40" Height="40"/>
    		<TextBlock TextWrapping="Wrap" Text="{Binding InfoString, Mode=TwoWay}" Margin="55,5,5,5" HorizontalAlignment="Left" VerticalAlignment="Center"/>
    		<Image HorizontalAlignment="Right" Height="12" Source="Media/Pictures/Remove.png" Stretch="Fill" VerticalAlignment="Top" Width="12" Margin="0,-4,-6,0">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="MouseLeftButtonDown">
    					<GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding CloseInfoCommand}"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    			<Image.Effect>
    				<DropShadowEffect BlurRadius="2" ShadowDepth="2"/>
    			</Image.Effect>
    		</Image>
    	</Grid>
    </Grid>
</UserControl>
